<template>
	<div>
		<!-- 第一部分 -->
		<view class="search" @click="">
			<u-search class="search_" placeholder="搜索医生" action-text="" search-icon="/static/img/search.png" input-align="center"></u-search>
		</view>
		<!-- 第二部分 -->
		<view slot="body">
			<u-grid :col="2" class="border">
				<u-grid-item>
					<view class="item1">
						<image src="../../static/img/zhaoyaopin/ertong.png" style="width: 25px;height: 25px;"></image>
						<view class="desc">
							<view class="title1">儿童安全用药</view>
							<view class="title2">感冒、退热止痛、止咳</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item class="border2">
					<view class="item2">
						<image src="../../static/img/zhaoyaopin/zoulu-.png" style="width: 25px;height: 25px;"></image>
						<view class="desc">
							<view class="title1">跌打损伤用药</view>
							<view class="title2">伤口消毒、伤口抗感感染</view>
						</view>
					</view>

				</u-grid-item>
			</u-grid>
			<u-grid :col="2" >
				<u-grid-item class="border1">
					<view class="item1">
						<image src="../../static/img/zhaoyaopin/renwunannv.png" style="width: 25px;height: 25px;"></image>
						<view class="desc">
							<view class="title1">两性妇科用药</view>
							<view class="title2">痛经、阳痿、避孕药</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item class="border2 border1">
					<view class="item3">
						<image src="../../static/img/zhaoyaopin/shuji.png" style="width: 25px;height: 25px;"></image>
						<view class="desc">
							<view class="title1">老人常用药</view>
							<view class="title2">高血压、糖尿病</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 第三部分 -->
		<view class="u-table">
			<h4 >家庭常备药</h4>
			<table border="1" cellspacing="0" width='100%' borde-color="#CACACA">
				<tr>
					<td>布洛芬</td>
					<td>泰诺林</td>
					<td>百服宁</td>
					<td>必理通</td>
				</tr>
				<tr>
					<td>芬必得</td>
					<td>思密达</td>
					<td>口服液盐</td>
					<td>妈咪爱</td>
				</tr>
				<tr>
					<td>新泰康克</td>
					<td>溶菌酶含片</td>
					<td>宜诺斯</td>
					<td>开塞特</td>
				</tr>
			</table>
		</view>
	</div>
</template>

<script>
	export default {
		methods: {
			pageTo(url) {
				this.$u.route(url)
			},
			getUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		width: 100%;
		border-top: 5rpx solid #E5E5E5;
		padding-top: 10rpx;
		background-color: #FFFFFF;
	}

	.search_ {
		padding-left: 10rpx;
		width: 110%;
	}

	.border{
		margin-top: 15rpx;
		border-top: 15rpx solid #FAF8F8;
	}
	.border1{
		border-top:5rpx solid #FAF8F8;
		border-bottom: 15rpx solid #FAF8F8;
	}
	.border2{
		border-left:5rpx solid #FAF8F8;
	}

	.title1 {
		font-weight: bold;
		font-size: 12px;
	}

	.title2 {
		font-size: 9px;
	}

	.item1 {
		display: flex;
		text-align: left;
		margin-bottom: 30rpx;
		margin-left: 30rpx;

		.desc {
			margin-left: 20rpx;
		}
	}

	.item2 {
		display: flex;
		text-align: left;
		margin-bottom: 30rpx;
		margin-left: 30rpx;

		.desc {
			margin-left: 20rpx;
		}
	}
	.item3 {
		display: flex;
		text-align: left;
		margin-bottom: 30rpx;
		margin-right: 50rpx;
	
		.desc {
			margin-left: 20rpx;
		}
	}

	.list {
		border-top: 25rpx solid #FAF8F8;
		margin-top: 8px;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.u-table{
		width: 100;
		padding:5px 0;
		margin:5px 0 10px 0;
		table{
			border: 1px solid #CACACA;
		}
		tr{
			line-height: 50px;
			text-align: center;
		}
		h4{
			margin: 5px 0 10px 10px;
		}
	}
</style>
